<template>
  <div>
    <v-img
      class="w-screen h-screen"
      cover
      absolute
      aspect-ratio="16/9"
      gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.3)"
      src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
    ></v-img>
    <div class="flex justify-center items-center h-screen">
      <v-card width="800">
        <template #text>
          <div class="grid grid-cols-2 gap-5">
            <v-img cover :src="work"></v-img>
            <div>
              <h1>{{ title }}</h1>
              <div class="my-4">{{ subTitle }}</div>
              <v-form v-model="valid">
                <v-text-field
                  density="compact"
                  placeholder="请输入你的账号"
                  prepend-inner-icon="mdi-account-outline"
                  variant="outlined"
                  label="账号"
                  v-model="params.account"
                  :rules="[v => !!v || '账号不能为空']"
                ></v-text-field>
                <v-text-field
                  :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
                  :type="visible ? 'text' : 'password'"
                  density="compact"
                  placeholder="请输入你的密码"
                  prepend-inner-icon="mdi-lock-outline"
                  variant="outlined"
                  @click:append-inner="visible = !visible"
                  label="密码"
                  v-model="params.password"
                  :rules="[v => !!v || '密码不能为空']"
                ></v-text-field>
                <v-text-field
                  v-if="re"
                  :append-inner-icon="visibleRe ? 'mdi-eye-off' : 'mdi-eye'"
                  :type="visibleRe ? 'text' : 'password'"
                  density="compact"
                  placeholder="请确认你的密码"
                  prepend-inner-icon="mdi-lock-outline"
                  variant="outlined"
                  @click:append-inner="visibleRe = !visibleRe"
                  label="确认密码"
                  v-model="params.repassword"
                  :rules="[
                    v => !!v || '密码不能为空',
                    v => v === params.password || '两次密码不一致',
                  ]"
                ></v-text-field>
                <VerificationCode @change="e => (params.code = e)" />
              </v-form>

              <v-btn
                class="me-2 w-full"
                color="primary"
                variant="elevated"
                square
                @click="handleMain"
              >
                {{ mainBtnName }}
              </v-btn>
              <div class="flex justify-between items-center mt-3">
                <div>
                  <v-btn
                    class="me-2"
                    color="primary"
                    variant="elevated"
                    square
                    @click="$emit('sub')"
                  >
                    {{ subBtnName }}
                  </v-btn>
                  <v-btn
                    class="me-2"
                    color="primary"
                    variant="plain"
                    :ripple="false"
                  >
                    忘记密码
                  </v-btn>
                </div>
                <div class="flex gap-2" v-if="!showTags">
                  <v-img
                    v-for="item in community"
                    class="w-6 h-6"
                    :src="imgAddPrefix(item.img)"
                    @click="item.action"
                    :alt="item.link"
                  />
                </div>
              </div>
            </div>
          </div>
        </template>
      </v-card>
    </div>
    <div class="fixed bottom-5 inset-x-0 text-center">
      {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
    </div>
  </div>
</template>

<script setup lang="ts">
import work from '@/assets/work.png';
import VerificationCode from '@/components/auth/VerificationCode.vue';
import { AuthUSerType } from '@/types/user';
import { imgAddPrefix, toast } from '@/utils';
import { ref, reactive } from 'vue';
import { useBackStore } from '@/store/background';

const backStore = useBackStore();

defineProps({
  re: {
    type: Boolean,
    default: () => false,
  },
  showTags: {
    type: Boolean,
    default: () => false,
  },
  mainBtnName: {
    type: String,
    default: () => '登陆',
  },
  subBtnName: {
    type: String,
    default: () => '注册',
  },
  title: {
    type: String,
    default: () => 'Hello！',
  },
  subTitle: {
    type: String,
    default: () => '欢迎来到XXXXX',
  },
});

const valid = ref(false);

const params = reactive<AuthUSerType>({
  account: '',
  password: '',
  repassword: '',
  code: '',
});
const visible = ref(false);
const visibleRe = ref(false);
const emit = defineEmits(['main', 'sub']);
function handleMain() {
  if (valid.value) {
    if (backStore.captcha) emit('main', params);
    else toast('验证码过期，请点击图片刷新验证码', 'error');
  }
}
const community = [
  {
    img: '/icon/wechat.png',
    link: '/qq',
    action: () => {
      console.log('wechat');
    },
  },
  {
    img: '/icon/qq.png',
    link: '/qq',
    action: () => {
      console.log('qq');
    },
  },
  {
    img: '/icon/alipay.png',
    link: '/alipay',
    action: () => {
      console.log('alipay');
    },
  },
  {
    img: '/icon/dindin.png',
    link: '/dindin',
    action: () => {
      console.log('dindin');
    },
  },
  {
    img: '/icon/tiktok.png',
    link: '/tiktok',
    action: () => {
      console.log('tiktok');
    },
  },
  {
    img: '/icon/github.png',
    link: '/github',
    action: () => {
      console.log('github');
    },
  },
];
</script>

<style scoped></style>
